<template>
  <a-modal
    v-model:visible="visible"
    :title="modalTitle"
    width="35%"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form :model="formState" ref="formRef" :label-col="{ span: 5 }">
      <a-form-item
        label="收货人"
        name="name"
        :rules="[{ required: true, message: '请输入收货人' }]"
      >
        <a-input placeholder="请输入收货人" v-model:value="formState.name" />
      </a-form-item>
      <a-form-item
        label="收货手机号"
        name="mobile"
        :rules="[{ required: true, message: '请输入收货手机号' }]"
      >
        <a-input
          placeholder="请输入收货手机号"
          v-model:value="formState.mobile"
        />
      </a-form-item>
      <a-form-item
        label="地址"
        name="area"
        :rules="[{ required: true, message: '请选择' }]"
      >
        <a-cascader
          v-model:value="formState.area"
          :options="treeData"
          :field-names="{
            children: 'child',
            label: 'name',
            value: 'city_id',
          }"
          placeholder="请选择"
        />
      </a-form-item>
      <a-form-item
        label="详细收货地址"
        name="addr_info"
        :rules="[{ required: true, message: '请输入收货地址' }]"
      >
        <a-textarea
          placeholder="请输入详细收货地址"
          v-model:value="formState.addr_info"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import useModal from "@/utils/useModal";
import { message } from "ant-design-vue";
import { reactive, ref } from "vue";
import { edit, add, info } from "@/api/systemAddr";
import { cityTreeList } from "@/api/home";

const { visible, modalTitle } = useModal();
const emits = defineEmits(["modal-success"]);

const formRef = ref();
const treeData = ref([]);

const formState = reactive({
  addr_id: null,
  name: "",
  mobile: "",
  addr_info: "",
  area: [],
  province_id: null,
  city_id: null,
  area_id: null,
});

const show = (model) => {
  visible.value = true;
  modalTitle.value = model ? "编辑地址" : "添加地址";
  getCityTreeList();
  if (model && model.addr_id) {
    getDetails(model.addr_id);
  } else {
    resetForm({
      addr_id: null,
      name: "",
      mobile: "",
      addr_info: "",
      area: [],
      province_id: null,
      city_id: null,
      area_id: null,
    });
  }
};

const getCityTreeList = () => {
  cityTreeList().then((res) => {
    if (res.code === 0) treeData.value = res.data || [];
  });
};
const getDetails = (id) => {
  info({
    id: id,
  }).then((res) => {
    if (res.code === 0) {
      const data = res.data;
      resetForm(data);
      formState.area = [
        formState.province_id,
        formState.city_id,
        formState.area_id,
      ];
    }
  });
};

const handleOk = async () => {
  await formRef.value.validate().then(() => {
    let params = {
      name: formState.name,
      mobile: formState.mobile,
      addr_info: formState.addr_info,
      province_id: formState.area.length > 0 ? formState.area[0] : "",
      city_id: formState.area.length > 1 ? formState.area[1] : "",
      area_id: formState.area.length > 2 ? formState.area[2] : "",
    };
    if (formState.addr_id) {
      edit({
        id: formState.addr_id,
        ...params,
      }).then((res) => {
        if (res.code === 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("modal-success");
        }
      });
    } else {
      add(params).then((res) => {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("modal-success");
        }
      });
    }
  });
};
//设置表单的值
const resetForm = function (values) {
  for (var i in values) {
    formState[i] = values[i];
  }
};
const handleCancel = () => {
  formRef.value.resetFields();
};
// 暴露方法
defineExpose({
  show,
});
</script>
  